<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';

import { $t } from '@vben/locales';

const formattedDateTime = ref('');

let timer: any;

const updateDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  formattedDateTime.value = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
};

onMounted(() => {
  updateDateTime();
  timer = setInterval(updateDateTime, 1000); // 每秒更新一次
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<template>
  <div class="flex justify-end">
    {{ $t('views.common.printDate') }}：{{ formattedDateTime }}
  </div>
</template>
